import React, { useState, useEffect } from 'react';
import styled from "styled-components";
import "../../assets/sass/Home.scss";
import SideBar from './SideBar';
import HeaderAction from './HeaderAction';
import InfoTable from './InfoTable';
import { useHistory } from 'react-router';

const Wrapper = styled.div`
width:100vw;
height:100vh;
background:#f8f9ff;
display:flex;
justify-content: center;
align-items: center;
flex-direction: row;
justify-content: space-between;
`;

const MainContent = styled.div`
width:82vw;
height:100vh;
position: relative;
box-sizing: border-box;
padding-top:50px;
padding-right:20px;
overflow:auto;
`;


const MyContext = React.createContext({});


function Home()
{
    const [EmpDept, setEmpDept] = useState(undefined);

    const [EmpName, setEmpName] = useState(undefined);

    const [NewEmpState, setNewNewEmpState] = useState(false);

    const [AlertState, setAlertState] = useState(false);

    const history = useHistory();

    const [EmpData, setEmpData] = useState([]);

    useEffect(() =>
    {
        sessionStorage.getItem("admin") !== null ? console.log("AdminName:" + sessionStorage.getItem("admin")) : history.push("/Login");
    }, [history]);


    return (
        sessionStorage.getItem("admin") !== null ?
            <Wrapper>
                <SideBar />
                <MainContent>
                    <MyContext.Provider value={{
                        EmpData: [EmpData, setEmpData],
                        EmpDept: [EmpDept, setEmpDept],
                        EmpName: [EmpName, setEmpName],
                        NewEmpState: [NewEmpState, setNewNewEmpState],
                        AlertState: [AlertState, setAlertState]
                    }}
                    >
                        <HeaderAction MyContext={MyContext} />
                        <InfoTable MyContext={MyContext} />
                    </MyContext.Provider>
                </MainContent>
            </Wrapper>
            : null
    );
}


export default Home;
